<template>
  <div class="main">
    <div class="main-left">
      <!-- 顶部六个方块开始 -->
      <div class="topSixSqure">
        <div class="topdiv" @click="goToPlanPage">
          <table class="first-table">
            <div>
              <div class="firstText">规划许可</div>
              <div class="first-percentage">{{ this.planPercentage }}</div>
            </div>
            <div class="first-total">
              {{ this.planTotal }}
            </div>
          </table>
        </div>
        <div class="topdiv" @click="goToConstructionPage">
          <table class="second-table">
            <div>
              <div class="secondText">施工管理</div>
              <div class="second-percentage">
                {{ this.constructionPercentage }}
              </div>
            </div>
            <div class="second-total">
              {{ this.constructionTotal }}
            </div>
          </table>
        </div>
        <div class="topdiv" @click="goToCompletionPage">
          <table class="third-table">
            <div>
              <div class="thirdText">竣工验收</div>
              <div class="third-percentage">
                {{ this.completionPercentage }}
              </div>
            </div>
            <div class="third-total">
              {{ this.completionTotal }}
            </div>
          </table>
        </div>
        <div class="topdiv" @click="goToGatherPage">
          <table class="forth-table">
            <div>
              <div class="forthText">业务归档</div>
              <div class="forth-percentage">
                {{ this.gatherPercentage }}
              </div>
            </div>
            <div class="forth-total">
              {{ this.gatherTotal }}s
            </div>
          </table>
        </div>
      </div>
      <div class="center">
        <div class="left">
          <el-card style="margin-top: 1%; margin-bottom: 1%;height:100%">
            <div class="title-font">
              <i class="el-icon-s-promotion title-icon"></i>待办业务
            </div>
            <el-table @row-dblclick="createPro" :data="tempTableData.data" :row-class-name="tableRowClassName"
              class="needPro" size="medium">
              <el-table-column fixed prop="applyCode" label="业务号" align="center" min-width="150"></el-table-column>
              <el-table-column prop="name" label="姓名" align="center"></el-table-column>
              <el-table-column prop="townName" label="乡镇街道" align="center"></el-table-column>
              <el-table-column prop="villageName" label="村组社区" align="center"></el-table-column>
              <el-table-column prop="maxTime" label="剩余时间" align="center" :formatter="formatMaxTime">
              </el-table-column>
              <el-table-column prop="state" label="状态" align="center" :formatter="formatterData">
              </el-table-column>
              <el-table-column prop="operation" label="操作" align="center">
                <template slot-scope="scope">
                  <el-button size="mini" @click="createPro(scope.row)" type="primary" circle>
                    处理
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-footer style="text-align: left; margin-top: 0px; height:20px">
              <div class="block">
                <el-pagination @size-change="changePageSize" @current-change="changeCurrentPage" @prev-click="prevPage"
                  @next-click="nextPage" :current-page="tempTableData.currentPage" :page-sizes="[3]"
                  :page-size="tempTableData.pageSize" layout="total, sizes, prev, pager, next, jumper"
                  :total="tempTableData.total"></el-pagination>
              </div>
            </el-footer>
          </el-card>
          <el-card style="margin-top: 1%; margin-bottom: 1%;height:100%">
            <div class="title-font">
              <i class="el-icon-s-promotion title-icon"></i>办件统计
            </div>
            <div id="task" style="height:300px"></div>
          </el-card>
        </div>
      </div>
    </div>
    <div class="main-right">
      <el-card class="right-detail">
        <user-detail :roleName="roleName" :userName="userName" style="height:10%"></user-detail>
        <statistics ref="static" style="height:90%"></statistics>
      </el-card>
    </div>
  </div>
</template>
<script>
  import userDetail from "./component/userDetail";
  import statistics from "./component/statistics";
  import {
    getTotalsApi,
    needDealProApi
  } from "@/api/getTotal";
  import {
    getChildrenAddress
  } from "@/api/addressDictionary";
  import HighCharts from "highcharts";
  import store from "@/vuex/store";
  import {
    queryApplyPerMouthApi
  } from "@/api/statistics/statisticsApi";
  export default {
    components: {
      userDetail,
      statistics,
    },
    created: function () {
      this.getTotals(this.currentCode);
      this.getNeedDealPro();
      this.getApplyCount();
    },
    methods: {
      tableRowClassName({
        row,
        rowIndex
      }) {
        if (row.maxTime < row.warningTime && row.maxTime >= row.expireTime) {
          return "success-row"; //警告背景
        } else if (row.maxTime < row.expireTime) {
          return "warning-row"; //到期背景
        } else {
          return "";
        }
      },

      //顶部总量
      getTotals(currentCode) {
        getTotalsApi(currentCode).then((response) => {
          // this.dataTotal = response.data.data.dataTotal;
          this.gatherTotal = response.data.data.gatherTotal;
          // this.initTotal = response.data.data.initTotal;
          this.planTotal = response.data.data.planTotal;
          this.constructionTotal = response.data.data.constructionTotal;
          this.completionTotal = response.data.data.completionTotal;
          let total =
            response.data.data.gatherTotal * 1 +
            response.data.data.planTotal * 1 +
            response.data.data.constructionTotal * 1 +
            response.data.data.completionTotal * 1;

          this.gatherPercentageNum =
            Math.round((this.gatherTotal / total) * 10000) / 100.0;
          this.planPercentageNum =
            Math.round((this.planTotal / total) * 10000) / 100.0;
          this.constructionPercentageNum =
            Math.round((this.constructionTotal / total) * 10000) / 100.0;
          this.completionPercentageNum =
            Math.round((this.completionTotal / total) * 10000) / 100.0;

          this.gatherPercentage = this.gatherPercentageNum + "%";
          this.planPercentage = this.planPercentageNum + "%";
          this.constructionPercentage = this.constructionPercentageNum + "%";
          this.completionPercentage = this.completionPercentageNum + "%";
          //console.log(response.data.data)
        });
      },

      //待办业务
      getNeedDealPro() {
        needDealProApi(this.temp_bussi).then((response) => {
          this.tempTableData.data = response.data.data.items;
          this.tempTableData.total = response.data.data.total;
          if (response.data.data.total != 0) {
            var warningCount = 0;
            var ecount = 0;
            response.data.data.items.forEach((element) => {
              element.maxTime < element.warningTime &&
                element.maxTime > element.expireTime ?
                warningCount++
                :
                ""; //警告时间节点数
              element.maxTime < element.expireTime ? ecount++ : ""; //到期时间节点数
            });
            if (warningCount != 0 || ecount != 0) {
              this.$message({
                message: "您有" +
                  warningCount +
                  "条业务到了时间警告节点! !  " +
                  ecount +
                  "条业务即将过期! 请尽快处理！！！",
                center: true,
                type: "error",
              });
            }
          }
        });
      },
      createPro(row) {
        row.active = row.state - 2;
        row.townList = this.temp_bussi.townList;
        getChildrenAddress(row.townCode).then((villageList) => {
          row.villageList = villageList.data.data;
          this.$router.push({
            path: "./details",
            query: row,
          });
        });
      },

      changePageSize(val) {
        this.temp_bussi.pageSize = val;
        this.getNeedDealPro();
      },
      changeCurrentPage(val) {
        this.temp_bussi.currentPage = val;
        this.getNeedDealPro();
      },
      prevPage(val) {
        this.temp_bussi.currentPage = val;
        this.getNeedDealPro();
      },
      nextPage(val) {
        this.temp_bussi.currentPage = val;
        this.getNeedDealPro();
      },
      handleSelectionChange(val) {
        this.changeRow = val;
      },
      formatterData: function (row, column) {
        return row.state == "1" ?
          "录入未提交" :
          row.state == "2" ?
          "初审" :
          row.state == "3" ?
          "规划许可" :
          row.state == "4" ?
          "施工管理" :
          row.state == "5" ?
          "竣工验收" :
          row.state == "6" ?
          "归档" :
          row.state == "7" ?
          "监督执法" :
          "未知";
      },
      goToQueryPage() {
        this.$router.push({
          path: "./query",
        });
      },
      goToGatherPage() {
        this.$router.push({
          path: "./gather",
        });
      },
      goToInitPage() {
        this.$router.push({
          path: "./init",
        });
      },
      goToPlanPage() {
        this.$router.push({
          path: "./plan",
        });
      },
      goToConstructionPage() {
        this.$router.push({
          path: "./construction",
        });
      },
      goToCompletionPage() {
        this.$router.push({
          path: "./completion",
        });
      },
      taskChart() {
        HighCharts.chart("task", this.option);
      },
      // 每月收件量
      getApplyCount() {
        queryApplyPerMouthApi(this.addressCode).then((res) => {

          this.option.series[0].data = res.data.data.apply;
          this.option.series[1].data = res.data.data.plan;
          this.option.series[2].data = res.data.data.construction;
          this.option.series[3].data = res.data.data.completion;

          this.taskChart();
        });
      },
      formatMaxTime(row) {
        if (row.maxTime < 0) {
          return "已超时" + (row.maxTime - 2 * row.maxTime) + "天";
        }
        if (row.maxTime == 0) {
          return "今日最后一天";
        }
        if (row.maxTime > 0) {
          return row.maxTime + "天";
        }
      },
    },
    data() {
      return {
        roleName: "你好！",
        userName: store.getters.username,
        activeName: "1",
        currentCode: store.getters.currentCode,
        addressCode: store.getters.addressCode,
        dataTotal: "", //总量统计
        gatherTotal: "", //归档统计
        initTotal: "", //资料审查
        planTotal: "", //规划许可
        constructionTotal: "", //construction 施工过程
        completionTotal: "", //竣工测绘
        gatherPercentageNum: 0, //归档百分数
        planPercentageNum: 0, //规划许可百分数
        constructionPercentageNum: 0, //施工过程百分数
        completionPercentageNum: 0, //竣工测绘百分数
        gatherPercentage: "", //归档百分比
        planPercentage: "", //规划许可百分比
        constructionPercentage: "", //施工过程百分比
        completionPercentage: "", //竣工测绘百分比
        id: "test",
        option: {
          legend: {
            align: "right",
            itemMarginTop: 0,
            verticalAlign: "top",
          },
          credits: {
            enabled: false
          },
          title: {
            text: "",
          },
          xAxis: {
            categories: [
              "一月",
              "二月",
              "三月",
              "四月",
              "五月",
              "六月",
              "七月",
              "八月",
              "九月",
              "十月",
              "十一月",
              "十二月",
            ],
            crosshair: true,
          },
          yAxis: {
            min: 0,
            allowDecimals: false,
            title: {
              text: "办件量（件）",
            },
          },
          tooltip: {
            // head + 每个 point + footer 拼接成完整的 table
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
              '<td style="padding:0"><b>{point.y} 件</b></td></tr>',
            footerFormat: "</table>",
            shared: true,
            useHTML: true,
          },
          plotOptions: {
            column: {
              borderWidth: 0,
            },
          },
          series: [{
              name: "接件量",
              data: [12, 5, 7, 5, 14, 8, 23, 2, 12, 4, 15, 36],
            },
            {
              name: "规划许可量",
              data: [2, 3, 4, 4, 11, 8, 23, 12, 5, 4, 15, 14],
            },
            {
              name: "施工管理量",
              data: [23, 11, 13, 12, 14, 8, 11, 7, 12, 6, 9, 9],
            },
            {
              name: "竣工验收量",
              data: [4, 4, 5, 12, 12, 21, 15, 12, 17, 14, 10, 9],
            },
          ],
        },
        temp_bussi: {
          townCode: store.getters.currentCode,
          currentPage: 1,
          pageSize: 3,
          total: 0,
        },
        tempTableData: {
          //表格data
          data: [{
            name: "",
            id: "",
            idcard: "",
            address: "",
            state: "",
          }, ],
          currentPage: 1,
          pageSize: 3,
          total: 0,
          type: 0,
        },
        tableData2: [],
      };
    },
    mounted() {
      this.taskChart();
    },
  };
</script>
<style>
  .main {
    height: 100%;
    width: 100%;
  }

  .topSixSqure {
    text-align: center;
    padding: 0;
    width: 100%;
    clear: both;
    height: 100%;
  }

  .topdiv {
    border: 0;
    min-width: 160px;
    width: 23%;
    height: 100%;
    margin: 0 1%;
    border-radius: 5px;
    display: inline-block;
    _display: inline;
    *display: inline;
    zoom: 1;
    background: #fff;
    box-shadow: 5px 5px 9px 0 rgba(0, 0, 0, 0.12);
  }

  .center {
    text-align: center;
    margin: 0 auto;
    width: 100%;
    height: 100%;
  }

  .left {
    height: 190%;
    width: 98%;
    display: inline-block;
    _display: inline;
    *display: inline;
    zoom: 1;
  }

  @import url("../../css/iconfont.css");

  .main-left {
    height: 20%;
    width: 70%;
    float: left;
  }

  .main-right {
    width: 30%;
    float: left;
    height: 100%;
  }

  .title-font {
    text-align: left;
    font-weight: 900;
    font-size: 15px;
    color: #48a2ff;
    margin: 0 0 1% 2px;
    letter-spacing: 1px;
  }

  .title-icon {
    margin-right: 2px;
    color: chocolate;
  }

  .right-detail {
    height: 98%;
  }

  .main-left .el-table td,
  .el-table th {
    padding: 10px;
  }

  .main-left .el-table {
    font-size: 14px;
    border: gray;
  }

  .main-left .el-table .warning-row {
    color: red;
  }

  .main-left .el-table .success-row {
    color: orange;
  }

  .main-left .el-table__body tr.hover-row {
    border: 5px solid #8c71f9;
  }

  .first-table {
    width: 100%;
    height: 100%;
    background-image: url("~@/assets/img/index/first.png");
    background-size: 100% 100%;
    border-radius: 10px;
    border-radius: 10px;
    color: #f0b100;
  }

  .first-table:hover {
    width: 100%;
    height: 100%;
    background-image: url("~@/assets/img/index/first1.png");
    color: #ffffff;
  }

  .second-table {
    text-align: left;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border-radius: 10px;
    background-image: url("~@/assets/img/index/second.png");
    background-size: 100% 100%;
    color: #27b470;
  }

  .second-table:hover {
    background-image: url("~@/assets/img/index/second1.png");
    color: #ffffff;
  }

  .third-table {
    text-align: left;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border-radius: 10px;
    background-image: url("~@/assets/img/index/third.png");
    background-size: 100% 100%;
    color: #ff6c1e;
  }

  .third-table:hover {
    background-image: url("~@/assets/img/index/third1.png");
    color: #ffffff;
  }

  .forth-table {
    text-align: left;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border-radius: 10px;
    background-image: url("~@/assets/img/index/forth.png");
    background-size: 100% 100%;
    color: #29aeff;
  }

  .forth-table:hover {
    text-align: left;
    width: 100%;
    height: 100%;
    background-image: url("~@/assets/img/index/forth1.png");
    color: #ffffff;
  }

  .firstText {
    font-family: FZCCHJW--GB1-0;
    font-size: 45px;
    letter-spacing: 0;
    margin-left: 12%;
    margin-top: 1%;
    float: left;
  }

  .first-percentage {
    font-family: Antonio-Bold;
    font-size: 51px;
    letter-spacing: 0;
    float: right;
  }

  .first-total {
    margin-top: 20%;
    font-family: Antonio-Regular;
    font-size: 150px;
    letter-spacing: 2px;
    padding-right: 55%;
  }

  .secondText {
    font-family: FZCCHJW--GB1-0;
    font-size: 45px;
    letter-spacing: 0;
    margin-left: 12%;
    margin-top: 1%;
    float: left;
  }

  .second-percentage {
    font-family: Antonio-Bold;
    font-size: 51px;

    letter-spacing: 0;
    float: right;
  }

  .second-total {
    margin-top: 20%;
    font-family: Antonio-Regular;
    font-size: 150px;
    letter-spacing: 2px;
    padding-right: 55%;
    text-align: center;
  }

  .thirdText {
    font-family: FZCCHJW--GB1-0;
    font-size: 45px;
    letter-spacing: 0;
    margin-left: 13%;
    margin-top: 1%;
    float: left;
  }

  .third-percentage {
    font-family: Antonio-Bold;
    font-size: 51px;
    letter-spacing: 0;
    float: right;
  }

  .third-total {
    margin-top: 20%;
    font-family: Antonio-Regular;
    font-size: 150px;
    letter-spacing: 2px;
    padding-right: 55%;
    text-align: center;
  }

  .forthText {
    font-family: FZCCHJW--GB1-0;
    font-size: 45px;
    letter-spacing: 0;
    margin-left: 13%;
    margin-top: 1%;
    float: left;
  }

  .forth-percentage {
    font-family: Antonio-Bold;
    font-size: 51px;
    letter-spacing: 0;
    float: right;
  }

  .forth-total {
    margin-top: 20%;
    font-family: Antonio-Regular;
    font-size: 150px;
    letter-spacing: 2px;
    padding-right: 55%;
    text-align: center;
  }

  #task {
    position: flex;
    bottom: 5%;
  }
  .title-font {
    text-align: left;
    font-weight: 900;
    font-size: 45px;
    color: #48a2ff;
    margin: 0 0 1% 2px;
    letter-spacing: 1px;
}
.el-pagination button, .el-pagination span:not([class*=suffix]) {
    display: inline-block;
    font-size: 39px;
    min-width: 35.5px;
    height: 70px;
    line-height: 70px;
    vertical-align: top;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.el-pager li {
    padding: 20px 12px;
    font-size: 39px;
    min-width: 35.5px;
    height: 28px;
    line-height: 28px;
    box-sizing: border-box;
    text-align: center;
}
.el-pagination .btn-next .el-icon, .el-pagination .btn-prev .el-icon {
    display: block;
    font-size: 36px;
    font-weight: 700;
}
.el-pagination__sizes .el-input .el-input__inner {
    font-size: 39px;
    padding-left: 8px;
        height: 100%;
            width: 100%;
}
.el-pagination__sizes{
  width: 200px;
}
.el-select--mini{
 width: 100%;
}
.el-pagination .el-select .el-input {
    width: 100%;
    margin: 0 5px;
}
.el-pagination__editor.el-input{
  width: 100px;
}
.el-pagination__editor.el-input .el-input__inner {
    height: 50px;
}
.el-input {
    position: relative;
    font-size: 42px;
    display: inline-block;
    width: 100%;
}
</style>